<template>
  <v-container fluid grid-list-md class="agent-analyze">
    <v-flex md12>
      <v-layout row wrap>
        <v-flex md3 sm12 class="px-2 mt-2" @click="daily">
          <v-card color="white" class="cursor">
            <v-card-title class="title card-title-bg">
              <v-icon>today</v-icon>
              <span class="mx-2">日统计</span>
            </v-card-title>
            <v-divider></v-divider>
            <v-card-text class="body-2">
              <v-layout wrap row class="left-border-red subheading">
                <v-flex md6>今日新增: {{statistics.today}}</v-flex>
                <v-flex md6>昨日新增: {{statistics.yesterday}}</v-flex>
              </v-layout>
            </v-card-text>
          </v-card>
        </v-flex>
        <v-flex md3 sm12 class="px-2 mt-2 " @click="weekly">
          <v-card color="white" class="cursor">
            <v-card-title class="title card-title-bg">
              <v-icon>event_note</v-icon>
              <span class="mx-2">周统计</span>
            </v-card-title>
            <v-divider></v-divider>
            <v-card-text class="body-2">
              <v-layout wrap row class="left-border-indigo subheading">
                <v-flex md6>本周新增: {{statistics.thisWeek}}</v-flex>
                <v-flex md6>上周新增: {{statistics.lastWeek}}</v-flex>
              </v-layout>
            </v-card-text>
          </v-card>
        </v-flex>
        <v-flex md3 sm12 class="px-2 mt-2 " @click="monthly">
          <v-card color="white" class="cursor">
            <v-card-title class="title card-title-bg">
              <v-icon>date_range</v-icon>
              <span class="mx-2">月统计</span>
            </v-card-title>
            <v-divider></v-divider>
            <v-card-text class="body-2">
              <v-layout wrap row class="left-border-green subheading">
                <v-flex md6>本月新增: {{statistics.thisMonth}}</v-flex>
                <v-flex md6>上月新增: {{statistics.lastMonth}}</v-flex>
              </v-layout>
            </v-card-text>
          </v-card>
        </v-flex>
        <v-flex md3 sm12 class="px-2 mt-2 " @click="all">
          <v-card color="white" class="cursor">
            <v-card-title class="title card-title-bg">
              <v-icon>date_range</v-icon>
              <span class="mx-2">总计</span>
            </v-card-title>
            <v-divider></v-divider>
            <v-card-text class="body-2">
              <v-layout wrap row class="left-border-blue subheading">
                <v-flex md6>代理总人数: {{statistics.total}}</v-flex>
              </v-layout>
            </v-card-text>
          </v-card>
        </v-flex>
      </v-layout>
    </v-flex>
    <v-layout row wrap>
      <v-flex md2 sm2>
        <v-text-field mask="######" :counter="6" name="lftid" label="请输入代理ID" v-model="queryForm.lftid"></v-text-field>
      </v-flex>
      <v-flex md2 sm2>
         <v-select :items="proxyLevelItems" v-model="queryForm.proxyLevel" label="请选择代理等级" single-line></v-select>
      </v-flex>
      <v-flex md2 sm1>
        <v-select :items="statusItems" v-model="queryForm.status" label="上升/下降" single-line></v-select>
      </v-flex>
      <v-flex md1 sm1>
        <v-btn @click="search" dark color="blue" class="mt-2">
          <v-icon>search</v-icon>
          <span class="pl-2 subheading">搜索</span>
        </v-btn>
      </v-flex>
    </v-layout>
    <v-flex md12>
      <!-- 查询数据表格 -->
      <v-data-table hide-actions :loading="showProgress" :headers="headers" :items="tableData" class="elevation-1">
        <v-progress-linear slot="progress" color="teal" indeterminate></v-progress-linear>
        <template slot="items" slot-scope="props">
          <td class="text-xs-center subheading" width="6%">{{ props.item.lftid }}</td>
          <td class="text-xs-center" width="6%">
            <v-avatar size="36">
              <img :src="props.item.headUrl" alt="">
            </v-avatar>
          </td>
          <td class="text-xs-center subheading" width="6%">{{ props.item.nickname }}</td>
          <td class="text-xs-center subheading" width="8%">{{ props.item.proxyLevel | ProxyLevel }}</td>
          <td class="text-xs-center subheading" width="6%">{{ props.item.superId }}</td>
          <td class="text-xs-center subheading" width="6%">{{ props.item.player }}</td>
          <td class="text-xs-center subheading" width="6%">{{ props.item.oneProxy }}</td>
          <td class="text-xs-center subheading" width="6%">{{ props.item.twoProxy }}</td>
          <td class="text-xs-center subheading" width="6%">{{ props.item.threeProxy }}</td>
          <td class="text-xs-center subheading" width="6%">{{ props.item.fourProxy }}</td>
          <td class="text-xs-center subheading" width="6%">{{ props.item.thisGrade }}</td>
          <td class="text-xs-center subheading" width="10%"  v-if="headers.length === 13">
            <v-badge right color="transparent">
              <span> {{ props.item.lastGrade }}</span>
              <v-layout slot="badge">
                <v-icon :class="props.item.rate <= 0 ? 'down-arrow' : 'up-arrow'">keyboard_backspace</v-icon>
                <span :class="(props.item.rate <= 0 ? 'red' : 'green') + '--text body-2'">{{ props.item.rate | RateFilter }}</span>
              </v-layout>
            </v-badge>
          </td>
          <td class="text-xs-center subheading" width="10%">
            <v-btn flat round dark color="indigo" class="mx-1" @click="agentDepth(props.item)">
              <span class="mx-1">代理追溯</span>
              <v-icon color="indigo">line_style</v-icon>
            </v-btn>
          </td>
        </template>
        <template slot="no-data">
          <div class="text-md-center">
            <v-icon color="yellow darken-3">warning</v-icon>
            <span class="subheading">暂无数据</span>
          </div>
        </template>

      </v-data-table>
      <div class="text-xs-center my-2">
        <v-pagination @input="pageChange" circle :length="pagination.pageCount" :total-visible="pagination.totalVisible" v-model="pagination.page"></v-pagination>
      </div>
    </v-flex>

    <v-flex md12 v-if="showDepth">
      <v-flex>
        <span class="title">用户「{{user}}」的{{depth}}级代理深度追溯结果：</span>
      </v-flex>
      <!-- 查询数据表格 -->
      <v-data-table hide-actions :loading="subShowProgress" :headers="subHeaders" :items="subTableData" class="elevation-1">
        <v-progress-linear slot="progress" color="teal" indeterminate></v-progress-linear>
        <template slot="items" slot-scope="props">
          <td class="text-xs-center subheading">{{ props.item.lftid }}</td>
          <td class="text-xs-center">
            <v-avatar size="36">
              <img :src="props.item.headUrl" alt="">
            </v-avatar>
          </td>
          <td class="text-xs-center subheading">{{ props.item.nickname }}</td>
          <td class="text-xs-center subheading">{{ props.item.proxyLevel | ProxyLevel }}</td>
          <td class="text-xs-center subheading">{{ props.item.superId }}</td>
          <td class="text-xs-center subheading" width="6%">{{ props.item.thisGrade }}</td>
          <td class="text-xs-center subheading" width="10%"  v-if="subHeaders.length === 7">
            <v-badge right color="transparent">
              <span> {{ props.item.lastGrade }}</span>
              <v-layout slot="badge">
                <v-icon :class="props.item.rate <= 0 ? 'down-arrow' : 'up-arrow'">keyboard_backspace</v-icon>
                <span :class="(props.item.rate <= 0 ? 'red' : 'green') + '--text body-2'">{{ props.item.rate | RateFilter }}</span>
              </v-layout>
            </v-badge>
          </td>
        </template>
        <template slot="no-data">
          <div class="text-md-center">
            <v-icon color="yellow darken-3">warning</v-icon>
            <span class="subheading">暂无数据</span>
          </div>
        </template>

      </v-data-table>
      <div class="text-xs-center my-2">
        <v-pagination @input="subPageChange" circle :length="subPagination.pageCount" :total-visible="subPagination.totalVisible" v-model="subPagination.page"></v-pagination>
      </div>
    </v-flex>
    <v-dialog v-model="dialog" max-width="400px">
      <v-card class="px-3 py-3">
        <v-card-title>
          <span class="headline">请输入代理追溯深度</span>
        </v-card-title>
        <v-divider></v-divider>
        <v-card-text>
          <v-text-field mask="##" prepend-icon="line_weight" label="请输入正整数" v-model="depth"></v-text-field>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="red darken-1" flat @click.native="dialog = false">取消</v-btn>
          <v-btn color="blue darken-1" flat @click.native="confirmDialog">确定</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-container>
</template>

<script>
import * as agent from "../../api/agent";
export default {
  data: () => ({
    showProgress: false,
    subShowProgress: false,
    limit: 5,
    offset: 0,
    subOffset: 0,
    dialog: false,
    allowEdit: true,
    pagination: {
      page: 1,
      pageCount: 1,
      totalVisible: 7
    },
    subPagination: {
      page: 1,
      pageCount: 1,
      totalVisible: 7
    },
    queryForm: {
      lftid: "",
      nickname: "",
      status: 2
    },
    user: "...",
    statusItems: [
      {
        text: "下降",
        value: 2
      },
      {
        text: "上升",
        value: 1
      }
    ],
    proxyLevelItems: [
      {
        text: "总代理",
        value: 1
      },
      {
        text: "一级代理",
        value: 2
      },
      {
        text: "二级代理",
        value: 3
      }
    ],
    queryType: 1,
    queryTypeText: "",
    queryInput: "",
    tableData: [],
    formTitle: "代理资料",
    headers: [
      { text: "ID", value: "lftid", align: "center", sortable: false },
      { text: "头像", value: "headUrl", align: "center", sortable: false },
      { text: "昵称", value: "nickname", align: "center", sortable: false },
      { text: "等级", value: "saleLevel", align: "center", sortable: false },
      { text: "上级ID", value: "superId", align: "center", sortable: false },
      { text: "直接玩家", value: "superId", align: "center", sortable: false },
      { text: "总代理", value: "superId", align: "center", sortable: false },
      { text: "一级代理", value: "superId", align: "center", sortable: false },
      { text: "二级代理", value: "superId", align: "center", sortable: false },
      { text: "间接二级", value: "superId", align: "center", sortable: false },
      { text: "今日业绩", value: "superId", align: "center", sortable: false },
      { text: "昨日业绩", value: "lastWeek", align: "center", sortable: false },
      { text: "操作", value: "actions", align: "center", sortable: false }
    ],
    subHeaders: [
      { text: "ID", value: "lftid", align: "center", sortable: false },
      { text: "头像", value: "headUrl", align: "center", sortable: false },
      { text: "昵称", value: "nickname", align: "center", sortable: false },
      { text: "等级", value: "saleLevel", align: "center", sortable: false },
      { text: "上级ID", value: "superId", align: "center", sortable: false },
      { text: "今日业绩", value: "superId", align: "center", sortable: false },
      { text: "昨日业绩", value: "lastWeek", align: "center", sortable: false }
    ],
    statistics: {
      today: 0,
      yesterday: 0,

      thisWeek: 0,
      lastWeek: 0,

      thisMonth: 0,
      lastMonth: 0,
      total: 0
    },
    editedIndex: -1,
    editedItem: {},
    showDepth: false,
    depth: 1,
    type: 1
  }),
  mounted() {
    this.$nextTick(() => {
      $Vue.$off("refreshPage");
      $Vue.$on("refreshPage", () => {
        this.refresh();
      });
      $Vue.$off("areaCodeChange");
      $Vue.$on("areaCodeChange", () => {
        this.refresh();
      });
    });
    this.getAgentAnalyzeCard();
    this.getAgentAnalyzeTable();
    // this.getAgentList(this.limit, this.offset, 1);
  },
  created() {
    // this.initialize();
  },
  filters: {
    RateFilter: function(val) {
      return (Math.abs(val) * 100).toFixed(1) + "%";
    }
  },
  methods: {
    refresh() {
      this.isSearch = false;
      this.offset = 0;
      this.queryForm = {
        lftid: "",
        nickname: "",
        status: 1
      };
      this.showDepth = false;
      this.getAgentAnalyzeTable();
      this.getAgentAnalyzeCard();
    },
    initialize() {
      this.tableData = [
        {
          headUrl: "https://countryflags.io/gb/flat/32.png",
          lftid: 160214,
          nickname: "Donald",
          telephone: "18925100362",
          superId: 135260,
          saleLevel: 1,
          headAgent: 100888,
          createTime: "2018-4-19",
          lastWeek: 454,
          thisWeek: 452,
          week: 0,
          month: 1,
          lastMonth: 5644,
          thisMonth: 3655,
          weekIncrement: "42.42%",
          monthIncrement: "51%",
          proxyLevel: 1,
          directOne: 12,
          directTwo: 18,
          indirectTwo: 45,
          directPlayer: 154
        },
        {
          headUrl: "https://countryflags.io/us/flat/32.png",
          lftid: 102010,
          nickname: "Trump",
          directPlayer: 43,
          superId: 100106,
          saleLevel: 1,
          headAgent: 100502,
          createTime: "2018-4-19",
          thisWeek: 412,
          lastWeek: 652,
          week: 1,
          month: 0,
          lastMonth: 6354,
          thisMonth: 4354,
          weekIncrement: "41.3%",
          monthIncrement: "48.52%",
          proxyLevel: 2,
          directOne: 48,
          directTwo: 86,
          indirectTwo: 145
        }
      ];
    },
    getAgentAnalyzeCard() {
      agent.getAgentAnalyzeCard.r().then(({ data }) => {
        if (data.result == 0) {
          this.statistics = data.data;
        } else {
        }
      });
    },
    getAgentAnalyzeTable() {
      this.showProgress = true;
      let opt = {
        limit: this.limit,
        offset: this.offset,
        type: this.type
      };
      agent.getAgentAnalyzeTable.r(opt).then(({ data }) => {
        let d = data.data;
        if (data.result == 0) {
          this.tableData = d.dataList;
          this.pagination.pageCount = d.totalCount
            ? Math.ceil(d.totalCount / this.limit)
            : 1;
        }
        this.showProgress = false;
      });
    },
    searchAgentAnalyze() {
      this.showProgress = true;
      let opt = {
        limit: this.limit,
        offset: this.offset,
        type: this.type,
        status: this.queryForm.status
      };
      if (this.queryForm.lftid !== "") {
        opt.lftid = this.queryForm.lftid;
      }
      if (this.queryForm.proxyLevel !== "") {
        opt.proxyLevel = this.queryForm.proxyLevel;
      }
      agent.searchAgentAnalyze.r(opt).then(({ data }) => {
        let d = data.data;
        if (data.result == 0) {
          this.tableData = d.dataList;
          this.pagination.pageCount = d.totalCount
            ? Math.ceil(d.totalCount / this.limit)
            : 1;
        } else {
          $Vue.$emit("toggleSnackbar", {
            text: data.message
          });
        }
        this.showProgress = false;
      });
    },
    getAgentDepth() {
      this.subShowProgress = true;
      let opt = {
        limit: this.limit,
        offset: this.subOffset,
        ascendDeep: this.depth,
        uid: this.editedItem.uid,
        type: this.type
      };
      agent.getAgentDepth.r(opt).then(({ data }) => {
        let d = data.data;
        if (data.result == 0) {
          this.showDepth = true;
          this.subTableData = d.dataList;
          this.subPagination.pageCount = d.totalCount
            ? Math.ceil(d.totalCount / this.limit)
            : 1;
        }
        this.subShowProgress = false;
      });
    },
    search(fromPage) {
      // 点击分页
      if (fromPage !== "wyvj") {
        this.offset = 0;
        this.pagination.page = 1;
      }
      this.searchAgentAnalyze();
      this.isSearch = true;
    },
    pageChange(page) {
      this.offset = (page - 1) * this.limit;
      if (!this.isSearch) {
        this.getAgentAnalyzeTable();
      } else {
        // ***
        this.search("wyvj");
      }
    },
    subPageChange() {
      this.subOffset = (page - 1) * this.limit;
      this.getAgentDepth();
    },
    confirmDialog() {
      if (!Number.isInteger(+this.depth)) {
        return $Vue.$emit("toggleSnackbar", {
          text: "请输入整数"
        });
      }
      if (this.depth <= 0) {
        return $Vue.$emit("toggleSnackbar", {
          text: "请输入正数"
        });
      }
      this.getAgentDepth();
      this.dialog = false;
    },
    // 代理深度追溯
    agentDepth(item) {
      this.editedItem = item;
      this.user = item.nickname;
      //
      this.dialog = true;
    },
    daily() {
      this.type = 1;
      if (this.headers.length === 12) {
        this.headers.splice(10, 0, {
          text: "今日业绩",
          value: "today",
          align: "center",
          sortable: false
        });
      }
      this.$set(this.headers, 10, {
        text: "今日业绩",
        value: "today",
        align: "center",
        sortable: false
      });
      this.$set(this.headers, 11, {
        text: "昨日业绩",
        value: "yesterday",
        align: "center",
        sortable: false
      });
      if (this.subHeaders.length === 6) {
        this.subHeaders.splice(5, 0, {
          text: "今日业绩",
          value: "thisMonth",
          align: "center",
          sortable: false
        });
      }
      this.$set(this.subHeaders, 5, {
        text: "今日业绩",
        value: "thisMonth",
        align: "center",
        sortable: false
      });
      this.$set(this.subHeaders, 6, {
        text: "昨日业绩",
        value: "lastMonth",
        align: "center",
        sortable: false
      });
      this.getAgentAnalyzeTable();
    },
    weekly() {
      this.type = 2;
      if (this.headers.length === 12) {
        this.headers.splice(10, 0, {
          text: "本周业绩",
          value: "thisWeek",
          align: "center",
          sortable: false
        });
      }
      this.$set(this.headers, 10, {
        text: "本周业绩",
        value: "thisWeek",
        align: "center",
        sortable: false
      });
      this.$set(this.headers, 11, {
        text: "上周业绩",
        value: "lastWeek",
        align: "center",
        sortable: false
      });
      if (this.subHeaders.length === 6) {
        this.subHeaders.splice(5, 0, {
          text: "本周业绩",
          value: "thisMonth",
          align: "center",
          sortable: false
        });
      }
      this.$set(this.subHeaders, 5, {
        text: "本周业绩",
        value: "thisMonth",
        align: "center",
        sortable: false
      });
      this.$set(this.subHeaders, 6, {
        text: "上周业绩",
        value: "lastMonth",
        align: "center",
        sortable: false
      });
      this.getAgentAnalyzeTable();
    },
    monthly() {
      this.type = 3;
      if (this.headers.length === 12) {
        this.headers.splice(10, 0, {
          text: "本月业绩",
          value: "thisMonth",
          align: "center",
          sortable: false
        });
      }
      this.$set(this.headers, 10, {
        text: "本月业绩",
        value: "thisMonth",
        align: "center",
        sortable: false
      });
      this.$set(this.headers, 11, {
        text: "上月业绩",
        value: "lastMonth",
        align: "center",
        sortable: false
      });
      if (this.subHeaders.length === 6) {
        this.subHeaders.splice(5, 0, {
          text: "本月业绩",
          value: "thisMonth",
          align: "center",
          sortable: false
        });
      }
      this.$set(this.subHeaders, 5, {
        text: "本月业绩",
        value: "thisMonth",
        align: "center",
        sortable: false
      });
      this.$set(this.subHeaders, 6, {
        text: "上月业绩",
        value: "lastMonth",
        align: "center",
        sortable: false
      });
      this.getAgentAnalyzeTable();
    },
    all() {
      this.type = 4;
      this.$set(this.headers, 11, {
        text: "总业绩",
        value: "thisMonth",
        align: "center",
        sortable: false
      });
      this.headers.splice(10, 1);

      this.$set(this.subHeaders, 6, {
        text: "总业绩",
        value: "thisMonth",
        align: "center",
        sortable: false
      });
      this.subHeaders.splice(5, 1);
      this.getAgentAnalyzeTable();
    }
  }
};
</script>

<style lang="less" scoped>
.down-arrow {
  transform: rotate(-90deg);
  color: #f44336 !important;
}
.up-arrow {
  transform: rotate(90deg);
  color: #4caf50 !important;
}
</style>

